<template>
  <div class="containers">
    <div class="canvas" ref="canvas"></div>
    <div id="js-properties-panel" class="panel"></div>
  </div>
</template>

<script>
// 引入bpmn.js
import BpmnModeler from "bpmn-js/lib/Modeler";
import CustomModeler from './customModeler'
import customModule from './custom'
import xml from "./emty"
// 引入bpmn样式
import 'bpmn-js/dist/assets/diagram-js.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
export default {
  name: 'bpmnTest',
  data() {
    return {
      // 创建的bpmn对象
      bpmnModeler: null,
      // 画布 element
      canvas: null,
    }
  },

  mounted() {
    console.log('BpmnModeler---->',BpmnModeler);
    this.init();
  },

  methods: {
    /**
       * 初始化
       * @returns {undefined}
       */
    init() {
      // 获取画布
      this.canvas = this.$refs.canvas;
      // 创建Bpmn对象
      this.bpmnModeler = new CustomModeler({
        container: this.canvas,
        additionalModules: [
        customModule
    ]
      });
      // 初始化建模器内容
      this.bpmnModeler.createDiagram(xml);
      this.createNewDiagram(xml)

    },
    /**
 * 导入xml
 * @param { string } xml 流程图xml字符串
 * @returns {undefined}
 */
    async createNewDiagram(xml) {
      try {
        await this.bpmnModeler.importXML(xml)
      } catch (err) {
        console.log(err);
      }
    },



  }
}
</script>

<style scoped>
.sketch {
  height: 100%;
  width: 100%;

  .sketch-canvas {
    height: 100%;
    width: 100%;
  }
}

.containers {
  background-color: #ffffff;
  width: 100%;
  height: calc(100vh - 52px);
}

.canvas {
  width: 100%;
  height: 100%;
}

.panel {
  position: absolute;
  right: 0;
  top: 0;
  width: 300px;
}
</style>
